<template>
  <div
    id="components-layout"
  >
    <Search
      :currentPlugin="currentPlugin"
      @changeCurrent="changeIndex"
      @onSearch="onSearch"
      @openMenu="openMenu"
      @changeSelect="changeSelect"
      :searchValue="searchValue"
      :placeholder="placeholder"
      :pluginLoading="pluginLoading"
      :pluginHistory="pluginHistory"
      :clipboardFile="clipboardFile || []"
      @choosePlugin="choosePlugin"
      @focus="searchFocus"
      @clear-search-value="clearSearchValue"
      @clearClipbord="clearClipboardFile"
      @readClipboardContent="readClipboardContent"
    />
    <!-- <Result
      :pluginHistory="pluginHistory"
      :currentPlugin="currentPlugin"
      :searchValue="searchValue"
      :currentSelect="currentSelect"
      :options="options"
      :clipboardFile="clipboardFile || []"
      @setPluginHistory="setPluginHistory"
      @choosePlugin="choosePlugin"
    /> -->
  </div>
</template>

<script setup lang="ts">
import { watch, ref, toRaw } from 'vue';
// import { exec } from 'child_process';
// import Result from './components/result.vue';
import Search from './components/search.vue';
// import getWindowHeight from './common/utils/getWindowHeight';
// import useDrag from './common/utils/dragWindow';
// import { getGlobal } from '@electron/remote';
// import { PLUGIN_HISTORY } from './common/constans/renderer';
// import { message } from 'ant-design-vue';

// const { onMouseDown } = useDrag();
// const remote = window.require('@electron/remote');

// const currentSelect = ref(0);
// const menuPluginInfo: any = ref({});

// const config: any = ref(localConfig.getConfig());

// getPluginInfo({
//   pluginName: 'feature',
//   // eslint-disable-next-line no-undef
//   pluginPath: `${__static}/feature/package.json`,
// }).then((res) => {
//   menuPluginInfo.value = res;
//   remote.getGlobal('LOCAL_PLUGINS').addPlugin(res);
// });

// watch(
//   [options, pluginHistory, currentPlugin],
//   () => {
//     currentSelect.value = 0;
//     if (currentPlugin.value.name) return;
//     window.dtools.setExpendHeight(
//       getWindowHeight(
//         options.value,
//         (pluginLoading.value || !config.value.perf.common.history) ? [] : pluginHistory.value
//       )
//     );
//   },
//   {
//     immediate: true,
//   }
// );

// const changeIndex = (index) => {
//   if (!options.value.length) {
//     if (!pluginHistory.value.length) return;
//     if (
//       currentSelect.value + index > pluginHistory.value.length - 1 ||
//       currentSelect.value + index < 0
//     ) {
//       currentSelect.value = 0;
//       return;
//     }
//     currentSelect.value = currentSelect.value + index;
//     return;
//   }
//   if (
//     currentSelect.value + index > options.value.length - 1 ||
//     currentSelect.value + index < 0
//   ) {
//     currentSelect.value = 0;
//     return;
//   }
//   currentSelect.value = currentSelect.value + index;
// };

// const openMenu = (ext) => {
//   openPlugin({
//     ...toRaw(menuPluginInfo.value),
//     feature: menuPluginInfo.value.features[0],
//     cmd: '插件市场',
//     ext,
//     click: () => openMenu(ext),
//   });
// };

// window.dtools.openMenu = openMenu;

// const choosePlugin = (plugin) => {
//   if (options.value.length) {
//     // const currentChoose = options.value[currentSelect.value];
//     // currentChoose.click();
//   } else {
//     // const localPlugins = getGlobal('LOCAL_PLUGINS').getLocalPlugins();
//     const localPlugins = '';
//     // const currentChoose = plugin || pluginHistory.value[currentSelect.value];
//     const currentChoose = plugin;
//     let hasRemove = true;
//     if (currentChoose.pluginType === 'app') {
//       hasRemove = false;
//       // changePluginHistory(currentChoose);
//       // exec(currentChoose.action);
//       return;
//     }
//     localPlugins.find((plugin) => {
//       if (plugin.name === currentChoose.originName) {
//         hasRemove = false;
//         return true;
//       }
//       return false;
//     });
//     // if (hasRemove) {
//     //   const result = window.dtools.db.get(PLUGIN_HISTORY) || {};
//     //   const history = result.data.filter(item => item.originName !== currentChoose.originName);
//     //   setPluginHistory(history);
//     //   return message.warning('插件已被卸载！');
//     // }
//     // changePluginHistory(currentChoose);
//     // window.dtools.openPlugin(
//     //   JSON.parse(
//     //     JSON.stringify({
//     //       ...currentChoose,
//     //       ext: {
//     //         code: currentChoose.feature.code,
//     //         type: currentChoose.cmd.type || 'text',
//     //         payload: null,
//     //       },
//     //     })
//     //   )
//     // );
//   }
// };

// const clearSearchValue = () => {
//   setSearchValue('');
// };
</script>

<style lang="less">
@import './assets/var.less';
#components-layout {
  height: 100vh;
  overflow: hidden;
  background: var(--color-body-bg);
  ::-webkit-scrollbar {
    width: 0;
  }
  &.drag {
    -webkit-app-region: drag;
  }
}
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, "PingFang SC", "Helvetica Neue", "Microsoft Yahei", sans-serif;
  user-select: none;
  overflow: hidden;
}

.detach {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
}

.detach {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 18px;
  padding-left: 10px;
  font-weight: 500;
  box-sizing: border-box;
  justify-content: space-between;
}

.detach.darwin {
  padding-left: 80px;
  -webkit-app-region: drag;
}

.detach.win32 {
  -webkit-app-region: drag;
}

.detach img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.detach input {
  background-color: var(--color-body-bg);
  color: var(--color-text-primary);
  width: 360px;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  font-size: 14px;
  border: none;
  padding: 0 10px;
  outline: none;
  -webkit-app-region: no-drag;
}

.detach input::-webkit-input-placeholder {
  color: #aaa;
  user-select: none;
}

.detach .info {
  display: flex;
  align-items: center;
}

.handle {
  display: flex;
  -webkit-app-region: no-drag;
}

.handle > div {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  margin-right: 6px;
}

.handle > div:hover {
  background-color: #dee2e6;
}

.handle .devtool {
  background: center no-repeat url("./assets/tool.svg")
}

.handle-container {
  display: flex;
  align-items: center;
}

.window-handle {
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

.window-handle > div {
  width: 48px;
  height: 56px;
  cursor: pointer;
}

.window-handle > div:hover {
  background-color: #dee2e6;
}

.window-handle .minimize {
  background: center / 20px no-repeat url("./assets/minimize.svg");
}

.window-handle .maximize {
  background: center / 20px no-repeat url("./assets/maximize.svg");
}

.window-handle .unmaximize {
  background: center / 20px no-repeat url("./assets/unmaximize.svg");
}

.window-handle .close {
  background: center / 20px no-repeat url("./assets/close.svg");
}

.window-handle .close:hover {
  background-color: #e53935 !important;
  background-image: url("./assets/close-hover.svg") !important;
}
</style>
